Litellm fix create key tags dropdown#24273
Litellm fix create key tags dropdown#24273ryan-crabbe merged 2 commits intolitellm_ryan_march_20from
Conversation
The create key form used getPredefinedTags() which only extracted tags from existing keys' metadata. If no keys had tags, the dropdown was empty. Switch to the existing useTags() React Query hook that fetches from /tag/list, matching the edit key form behavior.
Made-with: Cursor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Greptile SummaryThis PR fixes the tags dropdown in the Create Key form by switching from Key changes:
Confidence Score: 4/5
|
| Filename | Overview |
|---|---|
| ui/litellm-dashboard/src/components/organisms/create_key_button.tsx | Replaces getPredefinedTags(data) state with useTags() React Query hook; the fix is correct and consistent with the edit-key form. The old getPredefinedTags function (lines 87-108) is now dead code and should be removed, along with its embedded console.log statements. |
| ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx | Adds useTags mock and a new test validating that the tags dropdown is populated. The mock's data field is typed as an array instead of a Record<string, Tag>, which is an inaccuracy relative to the real API response shape, though the test still passes due to Object.values() working on arrays. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User opens Create Key modal] --> B[CreateKey component mounts]
B --> C[useTags hook fetches /tag/list]
C --> D{API response received?}
D -- Yes --> E[Map response values to select options]
D -- No --> F[Render empty dropdown]
E --> G[Tags dropdown populated]
F --> G
Comments Outside Diff (1)
-
ui/litellm-dashboard/src/components/organisms/create_key_button.tsx, line 87-108 (link)Dead code:
getPredefinedTagsis now unusedThe
getPredefinedTagsfunction (and thepredefinedTagsstate it powered) was the previous source of tag options. Since this PR replaces it withuseTags(), the function is now entirely dead code. It should be removed to keep the file clean.Additionally, it still contains
console.logdebug statements at lines 90 and 106 that would generate noise in production console output even though they're unreachable.(Remove lines 87–108 entirely)
Last reviewed commit: "test(ui): add unit t..."
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({ | ||
| useTags: vi.fn().mockReturnValue({ | ||
| data: [ | ||
| { name: "production", description: "Prod tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" }, | ||
| { name: "staging", description: "Staging tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" }, | ||
| ], | ||
| isLoading: false, | ||
| }), | ||
| })); |
There was a problem hiding this comment.
TagListResponse
TagListResponse is defined as Record<string, Tag> — an object keyed by tag name — but the mock returns data as a plain array:
// Actual shape returned by the real API
{ "production": { name: "production", ... }, "staging": { name: "staging", ... } }
// What the mock returns
[{ name: "production", ... }, { name: "staging", ... }]The test passes today because Object.values() happens to work on arrays too (returning the elements), so the component's mapping logic produces the same result. However, the mock inaccurately represents the real response, which means any future branch that checks the shape of tagsData (e.g. Array.isArray, key access, Object.keys) would behave differently under test than in production.
Consider updating the mock to match the real Record<string, Tag> shape:
| vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({ | |
| useTags: vi.fn().mockReturnValue({ | |
| data: [ | |
| { name: "production", description: "Prod tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" }, | |
| { name: "staging", description: "Staging tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" }, | |
| ], | |
| isLoading: false, | |
| }), | |
| })); | |
| vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({ | |
| useTags: vi.fn().mockReturnValue({ | |
| data: { | |
| production: { name: "production", description: "Prod tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" }, | |
| staging: { name: "staging", description: "Staging tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" }, | |
| }, | |
| isLoading: false, | |
| }), | |
| })); |
Rule Used: # Code Review Rule: Mock Test Integrity
What:... (source)
1 participant
Type
🐛 Bug Fix
Changes
The create key form used getPredefinedTags() which only extracted tags from existing keys' metadata. If no keys had tags, the dropdown was empty. Switch to the existing useTags() React Query hook that fetches from /tag/list, matching the edit key form behavior.